import React, { useState } from "react";
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import DescTextCom from '../../../components/DescText'
const App = () => {

    const [count, setCount] = useState(0);
    const onPress = () => setCount(count + 1);
    return (
        <View style={styles.container}>
            <DescTextCom>本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。</DescTextCom>

            <TouchableHighlight onPress={onPress}>
                <View style={styles.button}>
                    <Text>Touch Here</Text>
                </View>
            </TouchableHighlight>
            <View style={styles.countContainer}>
                <Text style={styles.countText}>
                    {count ? count : null}
                </Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        paddingHorizontal: 10
    },
    button: {
        alignItems: "center",
        backgroundColor: "#DDDDDD",
        padding: 10
    },
    countContainer: {
        alignItems: "center",
        padding: 10
    },
    countText: {
        color: "#FF00FF"
    }
});

export default App;